<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<link href="./static/styles/smoothness/stylesheets/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />

		<script src="./static/scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
		<script src="./static/scripts/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
		<script src="./static/scripts/blink.js" type="text/javascript"></script>

		<script type="text/javascript">
		//	<![CDATA[
			var	container_height, history_height, users_height, container_height1, history_height1, users_height1, channels;

			channels = [ ];

			function users_resize ( event, ui )
			{
				var width;

				width = $ ( this ).css ( 'width' );

				$ ( '.blink.users.container', this ).css ( {
					maxWidth: width,
					minWidth: width
				} );

				return null;
			}

			function container_resize ( event, ui )
			{
				var difference, height;

				height = parseInt ( $ ( this ).css ( 'height' ) );

				difference = height - container_height;

				$ ( '.c0 .blink.history.wrap' ).css ( 'height', ( history_height + difference ) + 'px' );
				$ ( '.c0 .blink.history.container' ).css ( {
					paddingBottom: ( history_height + difference ) + 'px',
					paddingTop: ( history_height + difference ) + 'px'
				} );
				$ ( '.c0 .blink.users' ).css ( 'height', ( users_height + difference ) + 'px' );
			}

			function container_resize1 ( event, ui )
			{
				var difference, height;

				height = parseInt ( $ ( this ).css ( 'height' ) );

				difference = height - container_height1;

				$ ( '.c1 .blink.history.wrap' ).css ( 'height', ( history_height1 + difference ) + 'px' );
				$ ( '.c1 .blink.history.container' ).css ( {
					paddingBottom: ( history_height1 + difference ) + 'px',
					paddingTop: ( history_height1 + difference ) + 'px'
				} );
				$ ( '.c1 .blink.users' ).css ( 'height', ( users_height + difference ) + 'px' );
			}

			function cursor_click ( event, ui )
			{
				var decrement, this_class, i, mark;

				decrement = true;
				mark = false;
				this_class = $ ( this ).attr ( 'class' );

				for ( i = channels.length - 1; i >= 0; --i )
				{
					if ( $ ( channels [ i ] ).attr ( 'class' ) !== this_class )
					{
						if ( ! decrement || parseInt ( $ ( channels [ i ] ).css ( 'zIndex' ) ) < parseInt ( $ ( channels [ i + 1 ] ).css ( 'zIndex' ) ) - 1 )
						{
							decrement = false;
						}

						$ ( channels [ i ] ).css ( 'zIndex', parseInt ( $ ( channels [ i ] ).css ( 'zIndex' ) ) - 1 );

						continue;
					}

					mark = i;

					break;
				}

				if ( mark === false )
				{
					for ( i = 0; i < channels.length; ++i )
					{
						$ ( channels [ i ] ).css ( 'zIndex', parseInt ( $ ( channels [ i ] ).css ( 'zIndex' ) ) + 1 );
					}
				}
				else
				{
					channels.splice ( mark, 1 );
				}

				channels.push ( this );

				$ ( this ).css ( 'zIndex', channels.length + 100 );
			}

			function cursor_start ( event, ui )
			{
				$ ( '.blink.cursor-fix' ).css ( {
					cursor: $ ( event.originalEvent.target ).css ( 'cursor' ),
					display: 'block'
				} );
			}

			function cursor_stop ( event, ui )
			{
				$ ( '.blink.cursor-fix' ).css ( 'display', 'none' );
			}

			$ ( window ).load ( function ( )
			{
				var instance;

				instance = blink.connect ( './blink.php', 0, null, 1000 );
				blink.bind ( instance, 0, '.c0' );
				blink.bind ( instance, 1, '.c1' );

				blink.lock ( );

				container_height = parseInt ( $ ( '.c0' ).css ( 'height' ) ),
				history_height = parseInt ( $ ( '.c0 .blink.history' ).css ( 'height' ) ),
				users_height = parseInt ( $ ( '.c0 .blink.users.container' ).css ( 'height' ) );
				container_height1 = parseInt ( $ ( '.c1' ).css ( 'height' ) ),
				history_height1 = parseInt ( $ ( '.c1 .blink.history' ).css ( 'height' ) ),
				users_height1 = parseInt ( $ ( '.c1 .blink.users.container' ).css ( 'height' ) );

				$ ( '.blink.chat.container' ).bind ( 'mousedown', cursor_click );

				$ ( '.c0' ).draggable ( {
					containment: '.blink.chat.wrap',
					handle: '.blink.header',
					start: cursor_start,
					stop: cursor_stop
				} );

				$ ( '.c1' ).draggable ( {
					containment: '.blink.chat.wrap',
					handle: '.blink.header',
					start: cursor_start,
					stop: cursor_stop
				} );

				$ ( '.c0' ).resizable ( {
					containment: '.blink.chat.wrap',
					handles: 'all',
					maxHeight: parseInt ( $ ( '.c0' ).css ( 'maxHeight' ) ),
					maxWidth: parseInt ( $ ( '.c0' ).css ( 'maxWidth' ) ),
					minHeight: parseInt ( $ ( '.c0' ).css ( 'minHeight' ) ),
					minWidth: parseInt ( $ ( '.c0' ).css ( 'minWidth' ) ),
					resize: container_resize,
					start: cursor_start,
					stop: cursor_stop
				} );

				$ ( '.c1' ).resizable ( {
					containment: '.blink.chat.wrap',
					handles: 'all',
					maxHeight: parseInt ( $ ( '.c1' ).css ( 'maxHeight' ) ),
					maxWidth: parseInt ( $ ( '.c1' ).css ( 'maxWidth' ) ),
					minHeight: parseInt ( $ ( '.c1' ).css ( 'minHeight' ) ),
					minWidth: parseInt ( $ ( '.c1' ).css ( 'minWidth' ) ),
					resize: container_resize1,
					start: cursor_start,
					stop: cursor_stop
				} );

				$ ( '.c0 .blink.users.wrap' ).resizable ( {
					handles: 'w',
					maxWidth: parseInt ( $ ( '.c0 .blink.users.container' ).css ( 'maxWidth' ) ),
					minWidth: parseInt ( $ ( '.c0 .blink.users.container' ).css ( 'minWidth' ) ),
					resize: users_resize,
					start: cursor_start,
					stop: cursor_stop
				} );

				$ ( '.c1 .blink.users.wrap' ).resizable ( {
					handles: 'w',
					maxWidth: parseInt ( $ ( '.c1 .blink.users.container' ).css ( 'maxWidth' ) ),
					minWidth: parseInt ( $ ( '.c1 .blink.users.container' ).css ( 'minWidth' ) ),
					resize: users_resize,
					start: cursor_start,
					stop: cursor_stop
				} );

				$ ( '.ui-resizable-handle', '.blink.chat.wrap' ).addClass ( 'blink' );

				$ ( '.c0 .blink.users.container' ).css ( {
					maxWidth: parseInt ( $ ( '.c0 .blink.users.container' ).css ( 'width' ) ),
					minWidth: parseInt ( $ ( '.c0 .blink.users.container' ).css ( 'width' ) )
				} );

				$ ( '.c1 .blink.users.container' ).css ( {
					maxWidth: parseInt ( $ ( '.c1 .blink.users.container' ).css ( 'width' ) ),
					minWidth: parseInt ( $ ( '.c1 .blink.users.container' ).css ( 'width' ) )
				} );
			} );
		//	]]>
		</script>

		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
				overflow-y: scroll;
			}

			.blink {
				z-index: inherit;
			}

			.blink.cursor-fix {
				display: none;
				height: 100%;
				position: absolute;
				width: 100%;
				z-index: 150;
			}

			.blink.chat.container {
				background-color: rgb(255,255,255);
				height: 275px;
				min-height: 112px;
				min-width: 350px;
				padding-bottom: 8px;
				padding-left: 8px;
				padding-right: 8px;
				padding-top: 8px;
				position: absolute !important;
				width: 500px;
				z-index: 100;
			}

			.blink.chat.wrap {
				height: 100%;
			}

			.blink.header {
				background-color: rgb(200,200,200);
				cursor: move;
				height: 30px;
				line-height: 30px;
				padding-left: 5px;
			}

			.blink.history.container {
				display: block;
				height: auto !important;
				overflow: hidden;
				padding-bottom: 220px;
				padding-top: 220px;
				width: auto !important;
			}

			.blink.history.wrap {
				display: block;
				height: 220px;
				overflow-x: hidden;
				overflow-y: scroll;
				width: auto !important;
			}

			.blink.history.container.h42 {
				padding-bottom: 204px;
				padding-top: 204px;
			}

			.blink.history.wrap.h42 {
				height: 204px;
			}

			.blink.input.fieldset {
				border-style: none;
			}

			.blink.input.legend {
				display: none;
			}

			.blink.input.message, .blink.textarea.message {
				border-color: rgb(128,128,128);
				border-style: solid;
				border-width: 1px;
				font-size: 0.9em;
				height: 18px;
				line-height: 18px;
				margin-top: 1px;
				padding-bottom: 2px;
				padding-left: 2px;
				padding-right: 2px;
				padding-top: 2px;
				width: 100%;
			}

			/* Tweak for IE 7 */
			*:first-child+html .blink.input.message, *:first-child+html .blink.textarea.message {
				margin-top: 0;
			}
			/* End Tweak */

			.blink.input.send, .blink.textarea.send {
				height: 24px;
				padding-bottom: 2px;
				width: 46px;
			}

			.blink.input.send:focus, .blink.textarea.send:focus {
				outline: none;
			}

			.blink.input.wrap.left, .blink.textarea.wrap.left {
				height: 24px;
				margin-right: 52px;
			}

			.blink.input.wrap.right, .blink.textarea.wrap.right {
				float: right;
				overflow: visible;
				width: 45px;
			}

			.blink.list.user {
				overflow: visible !important;
				padding-left: 10px;
				padding-right: 10px;
				white-space: nowrap;
				width: auto !important;
			}

			.blink.message.container {
				clear: both;
				padding-left: 55px !important;
				width: auto !important;
			}

			.blink.message.content {
				overflow: visible !important;
				width: auto !important;
				word-wrap: break-word;
			}

			.blink.message.time, .blink.message.user {
				float: left;
				height: 20px !important;
				margin-right: 5px !important;
				overflow: visible !important;
				white-space: nowrap;
			}

			.blink.message.user {
				font-weight: bold;
			}

			.t1 > .blink.message.user {
				font-weight: inherit;
			}

			.blink.message.time {
				margin-left: -55px;
				text-align: right;
				width: 50px;
			}

			.blink.users.wrap {
				display: block;
				float: right;
				left: 0 !important;
				top: 0 !important;
				width: 150px;
			}

			.blink.users.container {
				display: block;
				height: 245px;
				max-width: 200px;
				min-width: 25px;
				overflow-x: hidden;
				overflow-y: scroll;
				width: 150px;
			}

			.blink.textarea.message {
				height: 34px;
				overflow-y: scroll;
				resize: none;
			}

			.blink.textarea.send {
				height: 42px;
			}

			.blink.textarea.wrap.left {
				height: 42px;
			}

			.blink.ui-resizable-handle {
			}

			.blink.ui-resizable-e {
				right: 0;
				width: 8px;
				z-index: 25 !important;
			}

			.blink.ui-resizable-n {
				height: 8px;
				top: 0;
				z-index: 25 !important;
			}

			.blink.ui-resizable-s {
				bottom: 0;
				height: 8px;
				z-index: 25 !important;
			}

			.blink.ui-resizable-w {
				left: 0;
				width: 8px;
				z-index: 25 !important;
			}

			.blink.ui-resizable-se {
				background-position: -69px -229px;
				bottom: 0;
				height: 8px;
				right: 0;
				width: 8px;
				z-index: 50 !important;
			}

			.blink.ui-resizable-sw {
				bottom: 0;
				height: 8px;
				left: 0;
				width: 8px;
				z-index: 50 !important;
			}

			.blink.ui-resizable-ne {
				height: 8px;
				right: 0;
				top: 0;
				width: 8px;
				z-index: 50 !important;
			}

			.blink.ui-resizable-nw {
				height: 8px;
				left: 0;
				top: 0;
				width: 8px;
				z-index: 50 !important;
			}

			.ui-resizable-handle {
				background-color: rgb(200,200,200);
			}

			.shutdown {
				text-align: center;
			}
		</style>

		<title>Blink Messenger Demo</title>
	</head>

	<body>
		<div class="blink cursor-fix"></div>

		<div class="blink chat wrap">
			<div class="blink chat container c0">
				<div class="blink header">Blink Messenger Demo</div>

				<div class="blink users wrap">
					<div class="blink users container"></div>
				</div>

				<div class="blink history wrap h42">
					<div class="blink history container h42"></div>
				</div>

				<form action="" class="blink form wrap">
					<fieldset class="blink input fieldset">
						<legend class="blink input legend"></legend>

						<div class="blink textarea wrap right">
							<input class="blink textarea send" type="submit" value="Send" />
						</div>

						<div class="blink textarea wrap left">
							<textarea class="blink textarea message" cols="0" rows="0"></textarea>
						</div>
					</fieldset>
				</form>
			</div>

			<div class="blink chat container c1">
				<div class="blink header">Blink Messenger Demo</div>

				<div class="blink users wrap">
					<div class="blink users container"></div>
				</div>

				<div class="blink history wrap h42">
					<div class="blink history container h42"></div>
				</div>

				<form action="" class="blink form wrap">
					<fieldset class="blink input fieldset">
						<legend class="blink input legend"></legend>

						<div class="blink textarea wrap right">
							<input class="blink textarea send" type="submit" value="Send" />
						</div>

						<div class="blink textarea wrap left">
							<textarea class="blink textarea message" cols="0" rows="0"></textarea>
						</div>
					</fieldset>
				</form>
			</div>
		</div>
	</body>
</html>
